<template>
  <div class="home-container">
    <div class="wrap" ref="editor">
      <header>
        <div class="header-body">
          <div class="header-l">
            <img src="./assets/img/text-word.png" class="header-title"/>
            <img src="./assets/img/h-002.png" class="header-bo-l"/>
          </div>
          <div class="header-r">
            <div class="header-r-in">
              <div class="header-r-in-tab">
                <div class="header-r-in-tab-list" :class="{ active: currentTab === '园区概况' }" @click="currentTab = '园区概况'">
                  <span>园区概况</span>
                </div>
                <div class="header-r-in-tab-list" :class="{ active: currentTab === '师资队伍' }" @click="currentTab = '师资队伍'">
                  <span>师资队伍</span>
                </div>
                <div class="header-r-in-tab-list" :class="{ active: currentTab === '学术成果' }" @click="currentTab = '学术成果'">
                  <span>学术成果</span>
                </div>
                <div class="header-r-in-tab-list" :class="{ active: currentTab === '幼儿发展' }" @click="currentTab = '幼儿发展'">
                  <span>幼儿发展</span>
                </div>
                <div class="header-r-in-tab-list" :class="{ active: currentTab === '保育看板' }" @click="currentTab = '保育看板'">
                  <span>保育看板</span>
                </div>
                <div class="header-r-in-tab-list" :class="{ active: currentTab === '均衡跟踪' }" @click="currentTab = '均衡跟踪'">
                  <span>均衡跟踪</span>
                </div>
                <div class="header-r-in-tab-list" :class="{ active: currentTab === '材料互动' }" @click="currentTab = '材料互动'">
                  <span>材料互动</span>
                </div>
              </div>
              <div class="header-r-in-time">
                <div class="header-r-in-time-l">
                  {{formattedDateTime}}
                </div>
                <div class="header-r-in-time-c"></div>
<!--                <div class="header-r-in-time-r">-->
<!--                  {{currentTemperature}}度-->
<!--                </div>-->
                <div  @click="onFullScreen" title="全屏" class="fullScreen">
                  <i style="color: #e2b353;font-size: 22px;font-size: 24px;
  font-weight: bold;" :class="'el-icon-full-screen'" ></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="content-main">
        <div v-if="currentTab === '园区概况'">
          <homeIndex></homeIndex>
        </div>
        <div v-if="currentTab === '师资队伍'">
          <!-- 师资队伍的内容 -->
          <teacherTeam></teacherTeam>
        </div>
        <div v-if="currentTab === '学术成果'">
          <!-- 学术成果的内容 -->
          <academicAchievements></academicAchievements>
        </div>
        <div v-if="currentTab === '幼儿发展'">
          <!-- 幼儿发展的内容 -->
          <childDevelopment></childDevelopment>
        </div>
        <div v-if="currentTab === '保育看板'">
          <!-- 保育看板的内容 -->
          <nurseryDashboard></nurseryDashboard>
        </div>
        <div v-if="currentTab === '均衡跟踪'">
          <!-- 均衡跟踪的内容 -->
          <balancedTracking></balancedTracking>
        </div>
        <div v-if="currentTab === '材料互动'">
          <!-- 材料互动的内容 -->
          <materialInteraction></materialInteraction>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {exitFullScreen, reqFullScreen} from "./js/utils";
import countTo from 'vue-count-to';
import {screenSize} from "./js/utils";
import {mapGetters} from "vuex";
import homeIndex from './home';
import teacherTeam from './teacherTeam';
import academicAchievements from './academicAchievements';
import childDevelopment from './childDevelopment';
import axios from "axios";
import NurseryDashboard from "./nurseryDashboard";
import balancedTracking from "./balancedTracking";
import MaterialInteraction from "./materialInteraction";

export default {
  props: ['isFullScreen'],
  components: {
    MaterialInteraction,
    NurseryDashboard,
    countTo,
    homeIndex,
    teacherTeam,
    academicAchievements,
    childDevelopment,
    balancedTracking
  },
  data() {
    return {
      isSpa: false,
      nowTime: '',
      week: '',
      date: '',
      showTitle: true,
      currentTemperature: 0,
      now: new Date(),
      currentTab: '园区概况' // 默认选中“园区概况”
    }
  },
  computed: {
    ...mapGetters([
      "isFullScren",
    ]),
    formattedDateTime() {
      const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
      return this.now.toLocaleDateString('zh-CN', options);
    }
  },
  created() {
    // this.getLocation()
    this.updateTime();
    if (this.isFullScreen)
      this.isSpa = true
  },
  mounted() {
    screenSize(this.$refs.editor, this.isFullScren);
  },
  methods: {
    // getLocalTemperature(lat, lon) {
    //   const apiKey = 'c60724a326e3cd358c3d408efdc9a3d4'; // 替换为你自己的OpenWeatherMap API密钥
    //   axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`)
    //     .then((response) => {
    //       this.currentTemperature = response.data.main.temp;
    //     })
    //     .catch((error) => {
    //       console.error('获取温度失败：', error);
    //     });
    // },
    // successCallback(position) {
    //   console.log('获取当前位置', position)
    //   const { latitude, longitude } = position.coords;
    //   // this.getLocalTemperature(latitude, longitude);
    // },
    // getLocation() {
    //   navigator.geolocation.getCurrentPosition(this.successCallback)
    // },
    onFullScreen() {
      if (this.isFullScreen) {
        reqFullScreen()
        this.isFullScreen = false
      } else {
        if (this.isSpa) {
          this.isFullScreen = true
          exitFullScreen()
        }
      }
    },
    updateTime() {
      this.interval = setInterval(() => {
        this.now = new Date();
      }, 1000);
    },
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .wrap {
    transform-origin: 0px 0px 0px;
    background: url(./assets/img/bg.png) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: #011429;
    min-width: auto;
    width: 1920px;
    min-height: auto;
    overflow: auto;
    height: 100%;
    height: 1080px;

    header {
      position: relative;
      width: 100%;
      height: 80px;
      background: url(./assets/img/op-right.png) no-repeat;
      background-color: rgba(0, 11, 32, .6);
      background-size: 100% 80px;

      .header-body {
        box-shadow: inset 0 0 40px rgba(118, 186, 255, 0.28);
        display: flex;
      }

      .header-l {
        background: url(./assets/img/h-001.png) no-repeat;
        background-size: 80% 80px;
        background-position: left bottom;
        width: 450px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .header-title {
        width: 380px;
      }

      .header-bo-l {
        position: absolute;
        bottom: -42px;
        width: 450px;
        height: 80px;
        left: 0;
      }

      .header-r {
        flex: 1;
        padding-top: 15px;

        .header-r-in {
          background: url(./assets/img/h-003.png) no-repeat;
          background-size: 100% 10px;
          background-position: left bottom;
          display: flex;
          color: #9badc5;
          font-weight: 500;
          font-size: 20px;
          height: 50px;

          .header-r-in-tab {
            display: flex;
            align-items: center;
            flex: 1;
            margin-left: 10px;

            .header-r-in-tab-list {
              padding: 0 40px;
              height: 70px;
              line-height: 48px;
              margin-bottom: -24px;

              &.active {
                background: url(./assets/img/h-004.png) no-repeat;
                background-size: 100% 100%;
                background-position: left bottom;

                span {
                  background: linear-gradient(to bottom, #ace5ff, #fff);
                  -webkit-background-clip: text; /* 将背景裁剪为文字区域 */
                  -webkit-text-fill-color: transparent; /* 将文字颜色设置为透明 */
                }
              }
            }
          }

          .header-r-in-time {
            display: flex;
            align-items: center;
            padding: 0 20px;

            .header-r-in-time-c {
              height: 15px;
              border: 1px solid #8095b1;
              width: 4px;
              margin: 0 10px;
            }
          }
        }
      }
    }
  }
}
.content-main {
  padding: 10px;
}
.fullScreen{
  cursor: pointer;
}
</style>
